//当表单发生提交行为时
$('#userForm').on('submit', function() {
	//获取用户在表单中输入的内容并将内容格式化成参数字符串
	var formData = $(this).serialize();
	console.log(formData);
	//向服务器端发送请求
	$.ajax({
		type: 'post',
		url: '/users',
		data:formData,
		success:function() {
            //刷新页面
            alert('用户添加成功')
			location.reload();
		},
		error:function() {
			alert('用户添加失败')
		}
	})
	//阻止表单的默认提交行为
	return false;
})

//给用户添加头像; 当用户选择文件时
$('#modifyBox').on('change', '#avatar', function() {
	//用户选择到的文件
	// this.files[0]
	var formData = new FormData(); 
	formData.append('avatar',this.files[0]);

	$.ajax({
		type:'post',
		url: '/upload',
		data: formData,
		//告诉$.ajax方法不要解析请求参数
		processData: false,
		//告诉$.ajax方法不要设置请求参数的类型
		contentType: false,
		success:function(response) {
			console.log(response)
			//实现头像预览功能
			$('#preview').attr('src', response[0].avatar)
			//将图片地址存储在隐藏域中，方便查看地址
			$('#hiddenAvatar').val(response[0].avatar);
		}
	})
})

//向服务器端发送请求索要用户列表数据
$.ajax({
	type:'get',
	url:'/users',
	success:function(response) {
		// console.log(response)
		//使用模板引擎将数据和html字符串进行拼接
		var html = template('userTpl', {
			data:response
		});
		// console.log(html);
		//将拼接号的字符串显示在页面中
		$('#userBox').html(html);
	},

})

//通过事件委托的方式为编辑按钮添加点击事件
$('#userBox').on('click', '.edit', function() {
	//获取被点击用户的id值
	var id = $(this).attr('data-id');
	//根据id获取用户信息
	$.ajax({
		type:'get',
		url:'/users/' + id,
		success:function(response) {
			// console.log(response);
			var html = template('modifyTpl', response);
			$('#modifyBox').html(html);
		}
	})
})

//为修改表单添加表单提交事件
$('#modifyBox').on('submit', '#modifyForm', function() {
	//获取用户在表单中输入的内容
	var formData = $(this).serialize();//serialize方法会把表单中的参数内容格式化成参数字符串
	//获取要修改的那个用户的id值
	var id = $(this).attr('data-id');
	console.log(formData);
	//发送请求 修改用户信息
	$.ajax({
		type: 'put',
		url: '/users/' + id,
		data:formData,
		success:function(response) {
			console.log(response)
			//修改成功，刷新页面
			location.reload()
		}
	})
	//阻止表单默认提交
	return false;
})

//当删除按钮被点击时
$('#userBox').on('click', '.delete', function() {
	confirm('确定要删除用户信息吗')
	if(confirm) {
		var id = $(this).attr('data-id');
		$.ajax({
			type:'delete',
			url:'/users/' + id,
			success:function() {
				location.reload()
			}
		})
	}
})

//批量删除按钮设定
var selectAll = $('#selectAll'); //全选按钮
var deleteMany = $('#deleteMany'); //批量删除按钮
selectAll.on('change', function() {
	//获取全选按钮当前状态
	var status = $(this).prop('checked')
	if(status) {
		//如果点击全选，显示批量删除按钮
		deleteMany.show();
	} else{
		deleteMany.hide();
	}
	//如果点击全选，下面的就全选
	$('#userBox').find('input').prop('checked', status);
})
//设置状态框与全选框统一
$('#userBox').on('change', '.userStatus', function(){
	var inputs = $('#userBox').find('input');

	//在所有的状态框中，筛选出被选中的
	if(inputs.length == inputs.filter(':checked').length) {
		selectAll.prop('checked', true)
	} else{
		selectAll.prop('checked', false)
	}

	//如果选中的复选框数量大于0，说明有选中的复选框
	if(inputs.filter(':checked').length > 0) {
		//显示批量删除按钮
		deleteMany.show();
	} else{
		deleteMany.hide();
	}
})

//为批量删除按钮添加点击事件
deleteMany.on('click', function() {
	var ids = [];
	//获取选中的用户
	var checkedUser = $('#userBox').find('input').filter(':checked');
	//循环复选框，从复选框元素身上获取data-id属性的值
	checkedUser.each(function (index, element) {
		ids.push($(element).attr('data-id'));
	});

	if(confirm('确定批量删除吗')){
		$.ajax({
			type: 'delete',
			url: '/users/' + ids.join('-'),//数组下有一个join方法，可以将数据用符号‘-’拼接
			success: function() {
				location.reload();
			}
		})
	}
})